<template>
	<view class="organizeTeam">
		<view class="organizeTeam_header">
			<view class="organizeTeam_header_left">
				<seacrhHeader @searchclick.native="open" />
			</view>

			<view class="organizeTeam_notice  justify-content-right-left">
				<uni-badge class="uni-badge-left-margin" :text="weiduText" absolute="rightTop" size="small">
					<image src="@/static/temListEmail.png" @click.native="toEmail">

					</image>
				</uni-badge>

			</view>
		</view>
		<view class="content">
			<temList ref="temList" @updateTotal="updateTotal" @cloesNgnationLoading="cloesNgnationLoading"
				@updatetemListnDone="updatetemListnDone" />
		</view>
		<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
			@trigger="trigger" :direction="direction" />
		<uni-popup ref="popup" type="center">
			<teamSearch @closePopup="closePopup" @searctReload="searctReload" />
		</uni-popup>
	</view>
</template>

<script>
	import teamSearch from './src/teamSearch.vue'
	import temList from './src/temList.vue'
	import seacrhHeader from '@/components/common/seacrhHeader/index.vue'
	export default {
		data() {
			return {
				weiduText: 0,
				temListIndex: 1,
				temList: [],
				temListDone: false,
				paginationLoading: false,
				horizontal: "right",
				vertical: "bottom",
				direction: "vertical",
				content: [{
						iconPath: "/static/team.png",
						selectedIconPath: "/static/teamChecked.png",
						text: "发组队",
						active: false,
					},
					{
						iconPath: "/static/history.png",
						selectedIconPath: "/static/historyChecked.png",

						text: "记录",
						active: false,
					},
				],
				pattern: {
					color: "#7A7E83",
					backgroundColor: "#fff",
					selectedColor: "#007AFF",
					buttonColor: "#007AFF",
					iconColor: "#fff",
				},
			};
		},
		components: {
			seacrhHeader,
			temList,
			teamSearch
		},
		onReachBottom() {
			console.log("onReachBottom", 104);
			if (this.temListDone) return
			if (this.paginationLoading) return;

			this.paginationLoading = true;
			this.temListReload();
		},
		onShow() {
			console.log('show');
			this.reloadEmail()
			console.log(this.$token,83);
		},
		methods: {
			closePopup() {
				console.log('closePopup');
				this.$refs.popup.close()
			},
			searctReload(data) {
				//先重置当前比赛分页状态
				console.log('searctReload');
				this.paginationLoading = false
				this.temListDone = false
				this.temList = []
				this.temListIndex = 1

				this.$nextTick(() => {
					this.$refs.temList.reloadSearch(data)
				})

			},
			async reloadEmail() {
				console.log('reloadEmail');
				try {
					const result = await this.$mjcrequest.request({
						url: this.$api.countUnRead,
						header: this.$aplsjsonheader,
						method: 'GET',
						isNotLoading: true
					});
					this.weiduText = result.total
				} catch (e) {
					// this.$errMessageToast(e)
					//TODO handle the exception
				}

			},
			toEmail() {
				if (!this.$varitfyToken()) {
					this.$errMessageToast('请绑定五邑大学账号')
					return
				}
				uni.navigateTo({
					url: '/pages/organizeTeam/src/temEmail',
				});
			},
			//更新分页total
			updateTotal(total, type) {

				const temList = this.updatepaging(total);
				this.temList = temList;
				console.log(temList, 156);
				return;
			},
			//项目分页触发
			temListReload() {
				const obj = this.temList[this.temListIndex++];
				this.$eventBus.$emit("teamListReload", obj);
			},
			//关闭loading
			cloesNgnationLoading() {
				this.paginationLoading = false;
			},
			//通知比赛分页结束
			updatetemListnDone() {
				this.temListDone = true;
			},
			//更新分页区间子段
			updatepaging(total) {
				//默认limie为10
				let limit = 10;
				const countList = [];
				if (total >= limit) {
					const pageMath = Math.ceil(total / limit); //向上取整 3
					const pageSmall = Math.floor(total / limit); //向下取整 2
					for (let index = 0; index < pageMath; index++) {
						if (index == pageMath - 1) {
							//最后一页，设置为true
							countList.push({
								page: pageMath,
								limit: limit,
								done: true,
							});
						} else {
							//不是最后一页，设置为false
							countList.push({
								page: index + 1,
								limit: limit,
								done: false,
							});
						}
					}
				}
				console.log(countList, 163);
				return countList;
			},
			trigger(e) {
				const token = this.$token;
				if (token == "" || !token) {
					this.$errMessageToast("请绑定五邑大学账号");
					return;
				}
				for (let index = 0; index < this.content.length; index++) {
					this.content[index].active = false;
				}
				this.content[e.index].active = true;
				switch (e.item.text) {
					case "记录":
						uni.navigateTo({
							url: "/pages/organizeTeam/src/addTeamhistory",
						});
						break;
					case "发组队":
						uni.navigateTo({
							url: "/pages/organizeTeam/src/addTeam",
						});
						break;
				}
			},
			open() {
				this.$refs.popup.open("top");
			}
		}
	}
</script>

<style lang="less">
	.organizeTeam {
		height: 100vh;
		background-color: #fdfdfd;
		padding-bottom: 20rpx;

		&_header {
			display: flex;

			&_left {
				flex: 1;
			}
		}

		&_notice {
			width: 100rpx;
			background-color: #fff;
			z-index: 1;
			align-items: center;



			& image {
				width: 60rpx;
				height: 60rpx;
				overflow: hidden;
			}
		}
	}
</style>
